import React from 'react'
import styled from 'styled-components'
import image from '../assets/profile.jpeg'
import { HiOutlineLocationMarker } from 'react-icons/hi'
import { cardStyles } from './ReusableStyles'
export default function Profile() {
  return (
    <Section>
      <div className='image'>
        <img src={image} alt='' />
      </div>
      <div className='title'>
        <h2>张克敬</h2>
        <h5>
          <HiOutlineLocationMarker />
          河北省, 石家庄市
        </h5>
      </div>
      <div className='info'>
        <div className='container'>
          <h5>本月出勤</h5>
          <h3>28 天</h3>
        </div>
        <div className='container'>
          <h5>行驶公里数</h5>
          <h3>427 公里</h3>
        </div>
        <div className='container'>
          <h5>工作时长</h5>
          <h3>76 小时</h3>
        </div>
      </div>
    </Section>
  )
}

const Section = styled.section`
  ${cardStyles}
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  .image {
    max-height: 10rem;
    overflow: hidden;
    border-radius: 20rem;
    img {
      width: 10rem;
      height: 10rem;
      border-radius: 50%;
      object-fit: cover;
      transition: all 0.4s ease-in-out;
      &:hover {
        transform: scale(1.1);
      }
    }
  }
  .title {
    text-align: center;
    h2,
    h5 {
      color: #ffc107;
      letter-spacing: 0.1rem;
    }
  }
  .info {
    display: flex;
    gap: 1rem;
    .container {
      text-align: center;
      h3 {
        margin-top: 0.1rem;
      }
    }
  }
`
